<template>
    <main-layout title="详情" :showHome="false" :showBack="true">
        <div style="padding: 8px 12px; font-size: .7rem;"
            v-for="item in detail"
            :key="item.key">{{item.label}}：{{item.value}}</div>

        <van-steps direction="vertical" :active="remark.length">
            <van-step v-for="it in remark" :key="it.time">
                <h3>{{it.userName}}</h3>
                <h4>{{it.remark}}</h4>
                <p>{{it.time | df}}</p>
            </van-step>
        </van-steps>
    </main-layout>
</template>

<script>
    import { purchaseDetailApi } from '../../apis/puchaseApi'

    export default {
        data() {
            return {
                detail: [
                    {label: '项目', key: 'projectName', value: ''},
                    {label: '供应商', key: 'supplierName', value: ''},
                    {label: '联系人', key: 'supplierContact', value: ''},
                    {label: '材料', key: 'materialName', value: ''},
                    {label: '状态', key: 'state', value: ''}
                ],
                remark: []
            }
        },

        async created() {
            let result = await purchaseDetailApi(this.$route.query.id)

            if (result.code === 200) {
                // this.detail = result.data
                for (let it of this.detail) {
                    // it === {label: '项目', key: 'projectName', value: ''}
                    // result.data[it.key] === result.data["projectName"] === result.data.projectName
                    it.value = result.data[it.key]
                }

                this.remark = result.data.remark.reverse()
            }
        }
    }
</script>